@import '~antd/es/style/themes/default.less';
@bg-color: rgba(0, 0, 0, 0.4);
@width: 84%;
@height: 84%;
.viewBox {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;

  .viewT {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc((100% - @height) / 2);
    background-color: @bg-color;
  }
  .viewB {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc((100% - @height) / 2);
    background-color: @bg-color;
  }
  .viewL {
    position: absolute;
    top: calc((100% - @height) / 2);
    left: 0;
    width: calc((100% - @width) / 2);
    height: @height;
    background-color: @bg-color;
  }
  .viewR {
    position: absolute;
    top: calc((100% - @height) / 2);
    right: 0;
    width: calc((100% - @width) / 2);
    height: @height;
    background-color: @bg-color;
  }
  .view {
    position: absolute;
    top: 50%;
    left: 50%;
    width: @width;
    height: @height;
    background: url('~@/assets/images/panoramicTool/view.png') no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
    .btn {
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translate(-50%, 0);
      pointer-events: auto;
      button {
        margin: 0 5px;
      }
    }
  }
}
